<template>
  <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 2000">
    <div
      v-for="toast in toasts"
      :key="toast.id"
      class="toast align-items-center border-0 show mb-2"
      :class="toastClass(toast.type)"
      role="alert"
    >
      <div class="d-flex">
        <div class="toast-body">{{ toast.message }}</div>
        <button
          type="button"
          class="btn-close btn-close-white me-2 m-auto"
          @click="removeToast(toast.id)"
        ></button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useToastStore } from '@/store/toast'

const toastStore = useToastStore()

const toasts = computed(() => toastStore.toasts.map(t => ({ ...t })))

function removeToast(id) {
  toastStore.removeToast(id)
}

function toastClass(type) {
  switch (type) {
    case 'success':
      return 'text-bg-success'
    case 'danger':
      return 'text-bg-danger'
    case 'warning':
      return 'text-bg-warning'
    case 'info':
    default:
      return 'text-bg-info'
  }
}
</script>
